<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Emit&On</title>
</head>
<body>


<div id="app">

    {{money}}
    <!--.sync 是一个语法糖来实现数据双向流动 在子组件中,修改m希望影响到父组件, 需要手动调用$emit(update:m)-->
    <child :m.sync="money"></child>

</div>


<script src="../node_modules/vue/dist/vue.js"></script>


<script>

    let child = {
        template:'<div>child: money== {{m}} <button @click="update">Buy</button> </div>',
        props:['m'],
        methods:{
            update(){
                // this.m = 222.23  // 这种方式不会将数据变化反应到父组件中
                this.$emit('update:m',234.56)   // 父组件会更新数据变化
            }
        }
    }

    let vm = new Vue({
        el: '#app',
        data: {
            money: 123.45
        },
        components:{
            child
        },

        // methods:{
        //     childUpdate(v){
        //         this.money = v
        //     }
        // }
    })
</script>


</body>
</html>